<template>
  <div class="app-container">

    <div class="filter-container">
      <el-button @click="addChannel(undefined,undefined)" type="primary" class="filter-item">添加</el-button>
      <el-button @click="getRecords" type="danger" class="filter-item">刷新</el-button>
    </div>


    <el-table
      v-loading="listLoading"
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column prop="name" label="频道名称" min-width="100"></el-table-column>
      <el-table-column prop="status" label="上架/下架" min-width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1">上架</span>
          <span v-if="scope.row.status==2">下架</span>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" min-width="160"></el-table-column>

      <el-table-column fixed="right" label="操作" min-width="150">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="addChannel(scope.$index, scope.row)">添加</el-button>
          <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button v-if="scope.row.status==2" size="mini" type="text" @click="handleStatus(scope.$index, scope.row)">上架</el-button>
          <el-button v-if="scope.row.status==1" size="mini" type="text" @click="handleStatus(scope.$index, scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="isAdd?'添加频道':'编辑频道'" :visible.sync="dialogFormVisible">


      <el-form ref="form" :model="form"  label-width="100px">
        <el-form-item label="上级频道" >
          <el-input :disabled="true" :value="pName"></el-input>
        </el-form-item>
        <el-form-item label="频道名称" >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item v-if="isAdd">
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
        <el-form-item v-else>
          <el-button type="primary" @click="onSubmit('form')">修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

import { myGet, myPost } from '@/utils/myUtils'

const urlArticleLst = '/guard/article/classify/lst?tree=1'
const urlArticleAdd = '/guard/article/classify/add'
const urlArticleChange = '/guard/article/classify/change'
const urlArticleDel = '/guard/article/classify/del'
const urlArticleDetail = '/guard/article/classify/detail'

export default {
  data() {
    return {
      pName:"",
      list:[],
      isAdd:true,
      listLoading:true,
      dialogFormVisible:false,
      form:{
        id:0,
        name:'',
        pid:0,
      },
    }
  },
  methods: {
    getRecords(){
      this.listLoading = true
      myGet(urlArticleLst).then(res => {
        this.listLoading = false
        if(res.status){
          this.list = res.data.records
        }
      })
    },
    addChannel(index,row){
      this.isAdd = true
      this.dialogFormVisible = true
      Object.assign(this.form, this.$options.data().form)
      let pName,id
      if( typeof row === "undefined"){
        pName = "顶级分类"
        id = 0
      }else{
        pName = row.name
        id = row.id
      }
      this.$set(this.form,'pid',id)
      this.pName = pName
    },
    onSubmit(formName){
      this.$refs[formName].validate((valid)=>{
        if(valid){
          myPost(urlArticleAdd,this.form).then(res => {
            this.dialogFormVisible = false
            if(res.status){
              this.$message.success(res.msg)
              this.getRecords()
            }
          })
        }
      })
    },
    handleEdit(index,row){
      const ids = [row.id]
      myGet(urlArticleDetail,{ids}).then(res => {
        if(res.status){
          const info = res.data.records[0]
          this.pName = info.p_name
          delete info.p_name
          Object.assign(this.form,info)
          this.isAdd = false
          this.dialogFormVisible = true

        }
      })
    },
    handleStatus(index,row){

      const tip = row.status==1?'确定要下架吗？':'确定要上架吗？'

      this.$confirm(tip, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const ids = row.id
        const status = row.status==1?2:1;
        myGet(urlArticleChange,{ids,status}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    },
    handleDelete(index,row){
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = row.id
        myGet(urlArticleDel,{id}).then(res => {
          if(res.status){
            this.$message.success(res.msg)
            this.getRecords()
          }
        })
      });
    }
  },

  mounted() {
    this.getRecords()
  },

}
</script>

<style>

</style>
